<template>
	<view class="box padding-30">
		<view class="border-radio-14 address-box bg-white margin-b-20" @click="goAddress">
			<view class="address-content align-items-center" v-if="user.id">
				<view class="flex-1">
					<view class="fs-30 fw-b color-0 margin-b-20">{{user.area + user.address}}</view>
					<view class="fs-26 color-4d">
						<text style="margin-right: 56rpx;">{{user.name}}</text>
						<text>{{user.mobile}}</text>
					</view>
				</view>
				<view>
					<u-icon name='arrow-right' color="#999" size='16'></u-icon>
				</view>
			</view>
			<view class="add-address  align-items-center" v-else>
				<image src="/static/image/shop/add.png" mode="aspectFill"></image>
				<text class="margin-l-20 fs-30 color-70">添加收件人信息</text>
			</view>
		</view>
		<view class="bg-white padding-20 border-radio-14 margin-b-20" v-for="info in list">
			<view class="info-confirm flex-box">
				<view class="img-box">
					<image :src="info.image"> </image>
				</view>
				<view class="justifyContent-spaceBetween flex-column flex-1">

					<view class="title color-0 fs-30 fw-b">
						{{info.title}}
					</view>
					<view class="justifyContent-spaceBetween align-items-center">
						<view class="color-0 fs-24">￥
							<text class="fs-34 fw-b">{{info.price}}</text>
						</view>
						<view class="num-box color-0 flex-box">
							<u-number-box v-model="info.count" :integer='true'>
								<view slot="minus" class="minus">
									<!-- <image src="/static/image/service/num-minus.png" mode="widthFix"></image> -->
								</view>
								<text slot="input" style="width: 50rpx;text-align: center;"
									class="input">{{info.count}}</text>
								<view slot="plus" class="plus">
									<!-- <image src="/static/image/service/num-add.png" mode="widthFix"></image> -->
								</view>
							</u-number-box>
						</view>
					</view>
				</view>
			</view>
			<view class="solid"></view>
			<view class="fs-28 list-box justifyContent-spaceBetween" @click="show=true">
				<text class="color-333">商品金额</text>
				<view class=" color-0 flex-box">
					<text>￥{{Number(info.price) * info.count}}</text>
				</view>
			</view>

		</view>
        <view class="bg-white padding-20 border-radio-14  ">
            <view class="fs-28 list-box justifyContent-spaceBetween" @click="goCoupon">
                <text class="color-333">优惠券</text>
                <view class=" color-0 align-items-center">
                    <text class="color-red" v-if=" couponInfo.coupon.price">-￥{{ couponInfo.coupon.price}}</text>
                    <text v-else>暂无优惠券</text>
                    <u-icon name="arrow-right"></u-icon>
                </view>
            </view>
        </view>
		<view class="margin-t-20">
			<view class="title fs-28 color-0 fw-b margin-b-20">
				备注
			</view>
			<view class="bg-white border-radio-14 padding-20">
				<textarea name="" id="" cols="30" placeholder="请输入备注" rows="10" v-model="from.notes"></textarea>
			</view>
		</view>
		<view class="pay-box bg-white justifyContent-spaceBetween">
			<view class="fs-28 color-333">
				共{{from.number}}件，合计：
				<text class="fs-30 fw-b color-0">￥{{total }}</text>
			</view>
			<view class="pay-btn" @click="submitOrder">
				提交订单
			</view>
		</view>
	</view>
</template>

<script>
	import {
        getCartList
	} from "@/api/home";
	import {
		getAddressList
	} from "@/api/addrss.js"
	import {
		createCartOrder,
		payTest,
		pay
	} from '@/api/order.js'
	export default {
		data() {
			return {
				user: {},
				list: [],

				show: false,
				from: {
					time: '',
					number: 1,
					notes: '',
					id: 1,
				},
				shopId: '',
				couponInfo: {
                    coupon:{price:0}
                },
                idArr:[],
                ids:''
			}
		},
        computed: {
			total() {
                let val = 0
                        // Number(this.info.price) * this.from.number - this.couponInfo.coupon.price
				return val>=0?val:0
			}
		},
		onLoad(e) {
            uni.setStorageSync('couponInfo' ,{})
            this.idArr = e.ids.split(',')
            this.ids = e.ids
			// this.shopId = e.shopId
			this.getShopDetail()
			this.getAddressList()
		},
		onShow() {
			let address = uni.getStorageSync('addressInfo')
            let couponInfo  = JSON.parse(uni.getStorageSync('couponInfo') || '{}');
			if (address && address.id) {
				this.user = JSON.parse(address)
			}
			if (couponInfo && couponInfo.id) {
				this.couponInfo = couponInfo
			}
            console.log(this.couponInfo)
		},
		methods: {
			//  商品详情
			getShopDetail() {
                this.list=[]
                getCartList({ 	}).then(res => {
					if (res.code == 1) {
						res.data.map(item=>{
                            this.idArr.map(e=>{
                                if (e==item.id){
                                    this.list.push(item)
                                }
                            })

                        })
					}

				})
			},
			// 地址
			getAddressList() {
				getAddressList({
					page: 1,
					limit: 20
				}).then(res => {
					if (res.code == 1) {
						res.data.map(item => {
							if (item.is_default) {
								this.user = item
							}
						})
					}
				})
			},
			goAddress() {
				uni.navigateTo({
					url: '/pageA/address/index'
				})
			},
			// 优惠券
			goCoupon() {
				uni.navigateTo({
					url: '/pageA/shop/coupon'
				})
			},
			valChange() {
				// this.
			},
			addPatient() {
				uni.navigateTo({
					url: '/pageA/service/patient'
				})
			},
			submitOrder() {
				let data = {
                    cart_id: this.idArr,
                    address_id: this.user.id,
                    coupon_id: this.couponInfo?.id || '',
                    remark: this.from.notes
				}
				if (!this.user.id) {
					uni.showToast({
						icon: 'none',
						title: '请选择收件人信息'
					})
					return
				}

				createCartOrder(data).then(e => {
                    console.log( e.msg)
					if (e.code == 1) {
						payTest({
							order_no: e.data.order_no
						}).then(res => {
							if (res.code == 1) {
								uni.showToast({
									icon: 'none',
									title: '支付成功'
								})
								wx.requestPayment({
									timeStamp: res.data.timeStamp,
									nonceStr: res.data.nonceStr,
									package: res.data.package,
									signType: res.data.signType,
									paySign: res.data.paySign,
									success(res) {
										uni.showToast({
											icon: 'none',
											title: '支付成功'
										})
										setTimeout(() => {
											uni.switchTab({
												url:'/pages/car/car'
											})
										}, 1000)
									},
									fail(res) {
										uni.showToast({
											icon: 'none',
											title: '支付失败'
										})
									}
								})
							}else {
                                uni.showToast({
                                    icon: 'none',
                                    title: res.msg
                                })
                            }
						})

					} else {
						uni.showToast({
							icon: 'none',
							title: e.msg
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #F7F7F7;
	}

	.address-box {
		min-height: 160rpx;

		.add-address {
			min-height: 160rpx;
			justify-content: center;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}

	.address-content {
		height: 100%;
		padding: 30rpx 20rpx;
	}

	.info-confirm {
		.img-box {
			width: 100rpx;
			height: 100rpx;
			min-width: 100rpx;
			margin-right: 20rpx;
			border-radius: 8rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.solid {
		margin-top: 20rpx;
	}

	.add-box {
		justify-content: center;
		padding: 42rpx 0;

		image {
			width: 30rpx;
			margin-right: 20rpx;
		}
	}

	.list-box {
		height: 68rpx;
		align-items: center;
	}

	.num-box {
		image {
			width: 28rpx;
			height: 28rpx;
		}
	}

	.pay-box {
		align-items: center;
		padding: 10rpx 30rpx 62rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 162rpx;

		.pay-btn {
			width: 240rpx;
			height: 90rpx;
			color: #fff;
			line-height: 90rpx;
			text-align: center;
			background: #43ABC4;
			border-radius: 45rpx;
		}
	}

	.info-list {
		position: relative;
		padding: 20rpx 0 10rpx;

		.icon-box {
			position: absolute;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
		}
	}
</style>